<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -->
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>Potree Viewer</title>

	<link rel="stylesheet" type="text/css" href="../build/potree/potree.css">
	<link rel="stylesheet" type="text/css" href="../libs/jquery-ui/jquery-ui.min.css">
	<!-- <link rel="stylesheet" type="text/css" href="../libs/openlayers3/ol.css"> -->
	<link rel="stylesheet" type="text/css" href="../libs/spectrum/spectrum.css">
	<link rel="stylesheet" type="text/css" href="../libs/jstree/themes/mixed/style.css">
</head>

<body>
	<script src="../libs/jquery/jquery-3.1.1.min.js"></script>
	<script src="../libs/spectrum/spectrum.js"></script>
	<script src="../libs/jquery-ui/jquery-ui.min.js"></script>
	<script src="../libs/three.js/build/three.min.js"></script>
	<script src="../libs/three.js/extra/lines.js"></script>
	<script src="../libs/other/BinaryHeap.js"></script>
	<script src="../libs/tween/tween.min.js"></script>
	<script src="../libs/d3/d3.js"></script>
	<script src="../libs/proj4/proj4.js"></script>
	<!-- <script src="../libs/openlayers3/ol.js"></script> -->
	<script src="../libs/i18next/i18next.js"></script>
	<script src="../libs/jstree/jstree.js"></script>
	<script src="../build/potree/potree.js"></script>
	<script src="../libs/plasio/js/laslaz.js"></script>
	<script src="../libs/other/OBJLoader.js"></script>
	
	<!-- INCLUDE ADDITIONAL DEPENDENCIES HERE -->
	<!-- INCLUDE SETTINGS HERE -->
	
	<div class="potree_container" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; ">
		<div id="potree_render_area" style="background-image: url('../build/potree/resources/images/background.jpg');"></div>
		<div id="potree_sidebar_container"> </div>
	</div>
	
	<script>
	
		window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
		
		viewer.setEDLEnabled(false);
		viewer.setFOV(60);
		viewer.setPointBudget(2 * 1000 * 1000);
		viewer.setDescription(`
		If your browser supports WebVR, a VR button will appear on the bottom right. <br>
		(Tested on HTC Vive + Firefox 73 (<font style="color: #88ff88">works</font>),
		Oculus Quest (<font style="color: #88ff88">works</font>),
		Chrome 80 (<font style="color: #ff8888">(didn't work) </font>)
		<br>
		Controls: Point right controller in desired direction, then push the right joystick forward
		to fly in that direction.
		Pushing the left youstick in addition to the right one modifies speed by up to 4x.
		<br>
		Point cloud of <a href="http://www.dechenhoehle.de/" target="_blank">Dechen-Cave, Iserlohn</a>. Courtesy of <a href="http://lrg.geog.uni-heidelberg.de" target="_blank">Heidelberg University, LiDAR Research Group (LRG)</a><br>
			<i style="font-size: small">
			H&auml;mmerle, M., H&ouml;fle, B., Fuchs, J., Schr&ouml;der-Ritzrau, A., Vollweiler, N. & Frank, N. (2014): <a href="http://lrg.geog.uni-heidelberg.de/dechencave/" target="_blank">Comparison of Kinect and Terrestrial LiDAR Capturing Natural Karst Cave 3D Objects</a>. IEEE Geoscience and Remote Sensing Letters, Vol. 11(11), pp 1896-1900, DOI:<a href="http://dx.doi.org/10.1109/LGRS.2014.2313599" target="_blank">10.1109/LGRS.2014.2313599</a>
			</i>
		`);
		
		viewer.loadGUI(() => {
			viewer.setLanguage('en');
			$("#menu_appearance").next().show();
			$("#menu_tools").next().show();
			$("#menu_scene").next().show();
			$("#menu_filters").next().show();
			viewer.toggleSidebar();

			// reduce selectable range to make it easier to select lower values in 
			// mobile HMDs
			$('#sldPointBudget').slider({
				max: 3 * 1000 * 1000,
				step: 1000,
			});
		});


		Potree.loadPointCloud("http://5.9.65.151/mschuetz/potree/resources/pointclouds/uni_heidelberg/dechen_cave/cloud.js", "Dechen Cave", function(e){
			let scene = viewer.scene;
			let pointcloud = e.pointcloud;
			
			let material = pointcloud.material;
			material.size = 0.27;
			material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
			material.shape = Potree.PointShape.SQUARE;
			material.activeAttributeName = "rgba";
			material.rgbGamma = 0.6;
			
			scene.addPointCloud(pointcloud);
			
			scene.view.setView(
				[-2.647, -3.353, 22.175],
				[16.179, 16.701, 2.129],
			);
		});

		viewer.onVr( () => {

			viewer.vr.node.position.set( 
				9.837547617156579,
				13.798520822917606, 
				2.569661863723081);
		});

		const controls = new Potree.VRControlls(viewer);
		controls.speed = 2;
		controls.speedModificationFactor = 4;
		viewer.addEventListener("update", (e) => controls.update(e.delta));

	</script>


	<script>
	
	// create VR button if VR display is available
	async function createVRButton(){

		if(typeof navigator.getVRDisplays === "undefined"){
			return;
		}

		const displays = await navigator.getVRDisplays();
		console.log(displays);

		if(displays.length > 0){

			const controls = new Potree.VRControlls(viewer);
			viewer.addEventListener("update", (e) => controls.update(e.delta));

		
			const elVR = document.createElement("div");
			elVR.innerHTML = `
				<div style="position: absolute; z-index: 10000; right: 10px; bottom: 10px;" 
					onclick="viewer.toggleVR()">
					<img src="../build/potree/resources/icons/vr_button.svg" />
				</div>
			`;

			document.body.appendChild(elVR);
		}
	}
	createVRButton();
	
	</script>
	
	
  </body>
</html>
